<template>
  <header-option>
    <template v-slot:btn>
      <div>
        <cs-btn btnText="导出" @click.native="exportlist" />
      </div>
    </template>
    <template v-slot:input>
      <cs-label labelText="站点名称">
        <el-input class="cs-input" v-model.trim="siteName" clearable></el-input>
      </cs-label>
      <cs-btn
        type="search"
        btnText="查询"
        class="searcg_btn"
        @click.native="handleSearchBtnClick"
      />
    </template>
  </header-option>
</template>

<script>
import _ from 'lodash'

import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'

export default {
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  data() {
    return {
      siteName: ''
    }
  },
  beforeDestroy() {
    this.$bus.$off('equipmentMonitoringSearch')
    this.$bus.$off('monitoringexportlist')
  },
  watch: {
    siteName(newValue) {
      if (newValue === '') {
        this.$bus.$emit('equipmentMonitoringSearch', this.siteName)
      }
    }
  },
  methods: {
    exportlist() {
      this.$bus.$emit('monitoringexportlist', this.siteName)
    },
    handleSearchBtnClick: _.throttle(function () {
      this.$bus.$emit('equipmentMonitoringSearch', this.siteName)
    }, 1000)
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-input >>> .el-input__inner {
  width: 276px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.searcg_btn {
  margin-right: 30px;
}
/* 头部样式end */
</style>
